import React, { Dispatch } from "react";
import { Image, TouchableOpacity } from "react-native";
import { router } from "expo-router";
import { toQueryString } from "@/utils/url-utils";
import styles from "./index.style";
import {useChatMessageActions} from "@/hooks/chat/chat-message";
import {useChatDetailPageState} from "@/hooks/chat/chat-detail-page";

interface AutoSizeImageProps {
  messageId: string;
  uri: string;
  setShow: Dispatch<React.SetStateAction<boolean>>;
}

export default function AutoSizeImage({
                                          uri,
  messageId,
  setShow,
}: AutoSizeImageProps) {
   const {enableMultipleSelect} = useChatDetailPageState();
   const {addSelectedMessage} = useChatMessageActions();

  return (
    <TouchableOpacity
      style={styles.placeholder}
      onPress={() => {
        enableMultipleSelect
          ? addSelectedMessage(messageId)
          : router.navigate(
              `media/image-preview?${toQueryString({
                uri: uri,
              })}`
            );
      }}
      onLongPress={() => !enableMultipleSelect && setShow(true)}
    >
      <Image
        source={{ uri }}
        style={[styles.img, { width: 200, height: 200 }]}
        resizeMode="contain"
      />
    </TouchableOpacity>
  );
}